<template>
  <div class="questionHomepage">
    <div class="questionConList">
      <div class="topImg"></div>
      <div class="box">
        <div class="boxList">
          <!-- 验证页面 -->
          <div class="questionCon"
               v-if="isList">
            <!-- 员工综合评价表 -->
            <div class="questionNav">
              <p class="homepageTitle">{{detailObj.exercise_info.exercise_name}}</p>
              <p class="questionInfo">
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;您好！非常感谢您愿意用几分钟的时间完成本次调查问卷。所有答卷信息都将保密，请放心填写！<br>
                <span v-if="getRemark()==''?false:true"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{getRemark()}}</span>
              </p>
            </div>
            <!-- operaType为空时是登录界面 -->
            <div class="homepageCon"
                 v-if="operaType==''">
              <p>为保证答题的唯一性,请先验证！</p>
              <div class="inputCon">
                <div class="inputLoc login-input">
                  <el-input v-model.number="phoneVal"
                            clearable
                            oninput="if(value.length>11)value=value.slice(0,11)"
                            placeholder="输入手机号"> </el-input>
                  <img src="../../../assets/questionImg/phone-ic.png"
                       alt="">
                </div>
                <div class="verificationCode">
                  <div class="inputLoc login-input"
                       style="width:60%;margin-right: 15px;">
                    <el-input class="inputCode"
                              clearable
                              type="number"
                              oninput="if(value.length>4)value=value.slice(0,4)"
                              v-model.number="serveCode"
                              placeholder="输入服务密码"></el-input>
                    <img src="../../../assets/questionImg/mail-ic.png"
                         alt="">
                  </div>
                  <div class="inputbtn">
                    <el-button type="primary"
                               @click="onSubmit()"
                               class="submit-btn">提交</el-button>
                    <!-- <el-button :disabled='send'
                               @click="getCode">{{codes}}</el-button> -->
                  </div>
                </div>
                <div class="look-server-pwd">
                  <el-button type="text"
                             @click="onOperaFunc('confirmAccount','next')"
                             class="look-pwd">找回服务密码</el-button>
                </div>
              </div>
              <div style="margin-top:20px;">
                <p class="tip-style">提示：忘记或修改服务密码可通过找回服务密码功能对服务密码进行重置。
                </p>
              </div>
            </div>

            <!-- 确认帐号 
                 -->
            <div class="homepageCon"
                 v-if="operaType=='confirmAccount'">
              <p class="confirm-account">1.确认帐号 <span class="el-icon-circle-close"
                      @click="onOperaFunc('','pre')">&nbsp;</span></p>
              <el-form label-width="55px">
                <div class="inputCon">
                  <el-form-item label="姓名"
                                class="confirm-account-common">
                    <el-input v-model="user_name"
                              clearable
                              placeholder="输入姓名"> </el-input>
                  </el-form-item>
                  <el-form-item label="手机号">
                    <el-input v-model.number="confirm_count_phone"
                              clearable
                              oninput="if(value.length>11)value=value.slice(0,11)"
                              placeholder="输入手机号"> </el-input>
                  </el-form-item>
                  <div class="look-server-pwd">
                    <el-button type="primary"
                               @click="onOperaFunc('safeVer','next')">下一步</el-button>
                  </div>
                </div>
              </el-form>
            </div>

            <!-- 安全验证 
                 v-if="operaType=='confirmAccount'"-->
            <div class="homepageCon"
                 v-if="operaType=='safeVer'">
              <p class="confirm-account">2.安全验证 <span class="el-icon-circle-close"
                      @click="onOperaFunc('confirmAccount','pre')">&nbsp;</span></p>
              <el-form label-width="55px">
                <div class="inputCon">
                  <el-form-item label="手机号"
                                class="confirm-account-common">
                    <el-input v-model.number="confirm_count_phone"
                              :disabled="true"
                              oninput="if(value.length>11)value=value.slice(0,11)"
                              placeholder="输入手机号"> </el-input>
                  </el-form-item>
                  <el-form-item label="验证码">
                    <div style="display:flex;flex-direction:row;justify-content:space-between;">
                      <el-input v-model.number="verificationCode"
                                clearable
                                oninput="if(value.length>11)value=value.slice(0,11)"
                                placeholder="输入验证码"> </el-input>
                      <el-button :disabled='send'
                                 :type="send?'info':'primary'"
                                 @click="getCode">{{codes}}</el-button>
                    </div>
                  </el-form-item>
                  <div class="look-server-pwd">
                    <el-button type="primary"
                               @click="onOperaFunc('setServePwd','next')">下一步</el-button>
                  </div>
                </div>
              </el-form>
            </div>

            <!-- 设置服务密码 
                 v-if="operaType=='confirmAccount'"-->
            <div class="homepageCon"
                 v-if="operaType=='setServePwd'">
              <p class="confirm-account">3.设置服务密码 <span class="el-icon-circle-close"
                      @click="onOperaFunc('safeVer','pre')">&nbsp;</span></p>
              <el-form label-width="90px">
                <div class="inputCon">
                  <el-form-item label="新服务密码"
                                class="confirm-account-common">
                    <el-input v-model.number="newServeCode"
                              clearable
                              type="number"
                              oninput="if(value.length>4)value=value.slice(0,4)"
                              placeholder="输入服务密码"> </el-input>
                  </el-form-item>
                  <p class="remark-style">注：服务密码由4位数字组成。</p>
                  <div class="look-server-pwd">
                    <el-button type="primary"
                               @click="onOperaFunc('','next')">确定</el-button>
                  </div>
                </div>
              </el-form>
            </div>
          </div>
          <!-- 问题列表  -->
          <div class="questionList"
               v-else>
            <div class="questionNav">
              <p class="homepageTitle">{{detailObj.exercise_info.exercise_name}}</p>
              <p class="questionInfo">
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;您好！非常感谢您愿意用几分钟的时间完成本次调查问卷。所有答卷信息都将保密，请放心填写！<br>
                <span v-if="getRemark()==''?false:true"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{getRemark()}}</span>
              </p>
            </div>
            <div class="listName">
              <span>被评价者：</span>
              <el-select v-model="evaluateVal"
                         @change="choosePeople"
                         placeholder="请选择">
                <el-option v-for="item in evaluateOptions"
                           :key="item.person_id"
                           :label="item.person_name"
                           :value="item.person_id">
                </el-option>
              </el-select>
            </div>

            <div class="score">
              <span>{{this.all}}</span>
              <p>当前分值</p>
            </div>
            <div class="listCon list-padd-style"
                 v-for="(item1,ind) in detailObj.list"
                 :key="ind"
                 style="padding-bottom:10px!important;">
              <p class="list-con-title">{{getIndex(ind)}} {{item1.title}}({{item1.score}})</p>
              <div v-for="(item,index) in item1.children"
                   class="listCon"
                   :key="item.question_id">
                <p class="questionTitle">{{(index+1)+'、'+item.question_name + '('+item.score+'分)'}}</p>
                <div style="position:relative;margin: 0 20px;">
                  <!-- disabled -->
                  <el-slider style="position:relative"
                             show-input
                             v-model="item.sliderVal"
                             @change="changeVal(item1,ind,item,index)"
                             :max="Number(item.score)"
                             tooltip-class="changeTooltip">
                  </el-slider>
                  <div :style="{'left':(item.sliderVal/item.score)*100-5.5+'%'}"
                       class="scoreVal">
                    {{item.sliderVal}}
                  </div>
                  <div class="tipBot">
                    <div>非常不符合</div>
                    <div>非常符合</div>
                  </div>
                </div>
              </div>
            </div>
            <!-- <div class="listCon"
                 v-for="(item,index) in questionList"
                 :key="item.question_id">
              <p class="questionTitle">{{item.question_id+'、'+item.question_name + '('+item.score+'分)'}}</p>
              <div style="position:relative;margin: 0 20px;">
                <el-slider style="position:relative"
                           show-input
                           v-model="item.sliderVal"
                           @change="changeVal(index)"
                           :max="Number(item.score)"
                           tooltip-class="changeTooltip">
                </el-slider>
                <div :style="{'left':(item.sliderVal/item.score)*100-5.5+'%'}"
                     class="scoreVal">
                  {{item.sliderVal}}
                </div>
                <div class="tipBot">
                  <div>非常不符合</div>
                  <div>非常符合</div>
                </div>
              </div>
            </div> -->
          </div>
        </div>
        <div class="bottomBtn"
             v-if="!isList">
          <el-button @click="cancelQuestion">取消</el-button>
          <el-button type="primary"
                     @click="submit">提交</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { backEvaluateApi } from '@/services/ProjectCenter'
import { Dialog } from 'vant';
export default {
  data () {
    return {
      newServeCode: '',//新服务密码
      serveCode: '',//服务密码
      confirm_count_phone: '',//手机号
      user_name: '',//姓名
      operaType: '',//找回服务密码的过程 lookServePwd:找回服务密码 confirmAccount:确认帐号  safeVer:安全验证  setServePwd:设置服务密码
      detailObj: {
        exercise_info: {
          remark: '',
          exercise_name: '员工综合评价表',
          score: ''
        },
        list: []
      },
      send: false,
      codes: '获取验证码',
      phoneVal: '',
      verificationCode: '',
      isList: true,
      sliderList: [],
      exerciseId: '', //问卷id
      dataId: '',//评价人数据id
      evaluate_data: [],
      evaluateVal: "",
      sliderVal: 0,
      evaluateOptions: [],
      questionList: [],
      all: 0,
      arrs: [],
    }
  },
  created () {
    this.isList = true
    // this.phoneVal = this.$route.query.phone
  },
  mounted () {
    // 设置页面title
    let title = document.getElementsByTagName("title");
    title[0].innerText = '员工综合评价表';
  },
  methods: {
    resetParams () { //参数重置
      this.verificationCode = '';
      this.outTime(0);//重置
      this.newServeCode = '';//新服务密码
      this.serveCode = '';//服务密码
      this.confirm_count_phone = '';//手机号
      this.user_name = '';//姓名
    },
    onSetServePwd (typeV) {//设置服务密码-验证手机号姓名对应关系
      if (this.newServeCode === '') {
        this.$toast({
          message: '新服务密码不能为空',
          position: 'top'
        });
      } else {
        backEvaluateApi.editPassword({
          data: {
            password: this.newServeCode,//姓名
            phone: this.confirm_count_phone,//手机号
          }
        }).then((res) => {
          if (res.code == 0) {
            this.operaType = typeV;
            this.$toast({
              message: '操作成功',
              position: 'top'
            });
            this.resetParams();//参数重置
          }
        }).catch((error) => {
          console.log(error)
        })
      }
    },
    onConfirmCount (typeV) {//确认帐号
      if (this.user_name === '') {
        this.$toast({
          message: '姓名不能为空',
          position: 'top'
        });
      } else if (this.confirm_count_phone === '') {
        this.$toast({
          message: '手机号不能为空',
          position: 'top'
        });
      } else {
        backEvaluateApi.checkPhoneAndUser({
          params: {
            user_name: this.user_name,//姓名
            phone: this.confirm_count_phone,//手机号
          }
        }).then((res) => {
          if (res.code == 0) {
            this.operaType = typeV;
            this.$toast({
              message: '操作成功',
              position: 'top'
            });
          }
        }).catch((error) => {
          console.log(error)
        })
      }
    },
    onSafeVer (typeV) {//安全验证
      if (this.confirm_count_phone === '') {
        this.$toast({
          message: '手机号不能为空',
          position: 'top'
        });
      } else if (this.verificationCode === '') {
        this.$toast({
          message: '输入服务密码',
          position: 'top'
        });
      } else {
        backEvaluateApi.checkCode({
          params: {
            phone: this.confirm_count_phone,
            code: this.verificationCode
          }
        }).then((res) => {
          if (res.code === 0) {
            this.$toast({
              message: '验证成功',
              position: 'top'
            });
            this.operaType = typeV;
            // this.isList = false
            // this.selEvaluate()
            // // this.$router.push({ path: "\QuestionsList", query: { phone: this.phoneVal } })
          }
        }).catch(err => {
          console.log(err);
        })
      }
    },
    onOperaFunc (typeV, operType) {//操作函数  找回服务密码的过程 lookServePwd:找回服务密码 confirmAccount:确认帐号  safeVer:安全验证  setServePwd:设置服务密码
      if (typeV == 'safeVer' && operType == 'next') {
        this.onConfirmCount(typeV)
      } else if (typeV == 'setServePwd' && operType == 'next') {//安全验证
        this.onSafeVer(typeV);
      } else if (typeV == '' && operType == 'next') {
        this.onSetServePwd('')
      } else {
        this.operaType = typeV;
      }
    },
    getIndex (ind) {
      let indexVal = '';
      let arr = ['一、', '二、', '三、', '四、', '五、'];
      arr.map((item, inV, arr) => {
        if (inV == ind) {
          indexVal = item;
        }
      })
      return indexVal;
    },
    //验证手机号是否存在
    getCode () {
      if (this.confirm_count_phone === '') {
        this.$toast({
          message: '手机号不能为空',
          position: 'top'
        });
      } else {
        backEvaluateApi.existPhoone({
          params: {
            phone: this.confirm_count_phone
          }
        }).then((res) => {
          if (res.code === 0) {
            this.getExistCode()
          }
        }).catch(err => {
          console.log(err);
        })
      }
    },
    //获取sign
    getSign () {
      let param = {
        phone: this.confirm_count_phone
      }
      var newData = {};
      Object.keys(param).sort().map(key => {
        newData[key] = param[key]
      })
      var result = ""
      for (let name in newData) {
        if (typeof newData[name] != 'function') {
          result += "&" + name + "=" + encodeURI(newData[name]);
        }
      }
      return result.substring(1)
    },
    //倒计时
    outTime (time) {
      var that = this
      setTimeout(function () {
        if (time == 0) {
          that.send = false
          that.codes = '获取验证码';
          return
        }
        time--
        var mm = time >= 10 ? time : '0' + time;
        that.codes = '00:' + mm;
        that.outTime(time)
      }, 1000);
    },
    //获取服务密码
    getExistCode () {
      let sign = this.getSign();
      //b1ec84620cffbbcf64e0151135e28d4c
      let signMd5 = this.$md5(this.$md5("#1scv6zfzSR1wLaWN") + this.$md5(sign));
      if (this.confirm_count_phone === '') {
        this.$toast({
          message: '手机号不能为空',
          position: 'top'
        });
      } else {
        backEvaluateApi.getCode({
          params: {
            sign: signMd5,
            phone: this.confirm_count_phone
          }
        }).then((res) => {
          if (res.code === 0) {
            this.$toast({
              message: '已发送',
              position: 'top'
            });
            this.outTime(30)
            this.send = true
          }
          // this.$router.push({ path: "\QuestionsList",query:{phone:this.phoneVal} })
        }).catch(err => {
          console.log(err);
        })
      }
    },
    //提交
    onSubmit () {
      if (this.phoneVal === '') {
        this.$toast({
          message: '手机号不能为空',
          position: 'top'
        });
      } else if (this.serveCode === '') {
        this.$toast({
          message: '服务密码不能为空',
          position: 'top'
        });
      } else {
        backEvaluateApi.checkPassword({
          params: {
            phone: this.phoneVal,
            code: this.serveCode
          }
        }).then((res) => {
          if (res.code === 0) {
            this.$toast({
              message: '验证成功',
              position: 'top'
            });
            this.isList = false
            this.selEvaluate()
          }
        }).catch(err => {
          console.log(err);
        })
      }
    },
    //分值
    changeVal () {
      this.arrs = []
      this.all = 0
      let list = this.detailObj.list || [];
      if (list.length > 0) {
        list.map((item, ind, arr) => {
          if (item.children.length > 0) {
            item.children.map(item1 => {
              let submit = {
                question_id: item1.question_id,
                score: item1.sliderVal
              }
              this.arrs.push(submit)
            })
          }
        })
      };

      this.arrs.forEach((val, i) => {
        this.all += val.score
      });
    },
    //评价人选择
    selEvaluate () {
      this.evaluateOptions = [];
      backEvaluateApi.seclectPeople({
        params: {
          phone: this.phoneVal
        }
      }).then((res) => {
        this.evaluateOptions = res.data.list || [];
        if (this.evaluateOptions.length === 0) {
          this.evaluateVal = ''
        } else {
          this.evaluateVal = this.evaluateOptions[0].person_id
          this.exerciseId = this.evaluateOptions[0].exercise_id
          this.dataId = this.evaluateOptions[0].evaluator_data_id
        }
        this.getQuestionList()
      }).catch(err => {
        console.log(err);
      })
    },
    //选中被评论人
    choosePeople (val) {
      this.evaluateOptions.forEach(item => {
        if (item.person_id === val) {
          this.exerciseId = item.exercise_id
          this.dataId = item.evaluator_data_id
        }
        this.all = 0
      })
      this.getQuestionList()
    },
    getRemark () {
      let remarkV = this.detailObj.exercise_info.remark || ''
      return remarkV;
    },

    //获取问题列表
    getQuestionList () {
      backEvaluateApi.getQuestionList({
        // backEvaluateApi.lookTestList({
        params: {
          exercise_id: this.exerciseId,
          is_page: 0
        }
      }).then((res) => {
        let exInfo = res.data.exercise_info;
        var remark = exInfo.remark || '';
        this.detailObj.exercise_info = Object.assign({}, exInfo);
        this.detailObj.exercise_info.remark = remark == '' ? '' : '说明：' + remark;
        this.detailObj.list = res.data.list;
        if (this.detailObj.list.length > 0) {
          this.detailObj.list.map((item, ind, arr) => {
            if (item.children.length > 0) {
              item.children.map((item1, ind1) => {
                this.$set(item1, 'sliderVal', 0)
              })
            }
          })
        };
      }).catch(err => {
        console.log(err);
      })
    },
    getArrs () {
      let list = this.detailObj.list || [];
      let newArr = [];
      if (list.length > 0) {
        list.map((item, ind, arr) => {
          if (item.children.length > 0) {
            item.children.map(item1 => {
              let submit = {
                question_id: item1.question_id,
                score: item1.sliderVal
              }
              newArr.push(submit)
            })
          }
        })
      };
      return newArr;
    },
    //提交
    submit () {
      if (this.dataId === '') {
        this.$toast({
          message: '请先选择被评价人',
          position: 'top'
        });
      } else if (this.all === 0) {
        Dialog.confirm({
          title: '标题',
          message:
            '确定评分为0分吗？',
        })
          .then(() => {
            this.arrs = this.getArrs();
            this.submitAll()
          })
          .catch(() => {
            // on cancel
          });
      } else {

        Dialog.confirm({
          title: '标题',
          message:
            '确定评分为' + this.all + '分吗？',
        })
          .then(() => {
            this.submitAll()

          })
          .catch(() => {
            // on cancel
          });
      }
    },
    //提交分数
    submitAll () {
      backEvaluateApi.submitResult({
        data: {
          evaluator_data_id: this.dataId,
          score: this.all,
          evaluate_data: this.arrs
        }
      }).then((res) => {
        if (res.code === 0) {
          this.$toast({
            message: '提交成功!',
            position: 'top'
          });
        }
        this.selEvaluate()
        this.all = 0
      }).catch(err => {
        console.log(err);
      })
    },
    cancelQuestion () {
      this.isList = true
    }
  },
  computed: {},
  watch: {}
}
</script>

<style lang="scss" scoped>
html,
body {
  height: 100%;
}
#hibuilding-app {
  height: 100%;
}
.questionHomepage {
  position: relative;
  height: 100%;
  background-color: #efeff4;
  .box {
    background-color: #fff;
    margin: 0px 15px;
    min-height: 86px;
  }
  .boxList {
    padding: 0 15px;
    margin-top: -108px;
  }
  .topImg {
    height: 30vh;
    background-image: url("../../../assets/questionImg/top-banner.png");
    background-repeat: no-repeat;
    background-size: auto 100%;
  }
  .questionCon {
    padding: 0 15px;
    position: absolute;
    width: 92%;
    height: 86%;
    left: 50%;
    transform: translateX(-50%);
    background-color: #fff;
    .questionNav {
      text-align: center;
      line-height: 40px;
      border-bottom: solid 1px #d9d9d9;
      .homepageTitle {
        font-size: 20px;
        font-family: "PingFang SC Semibold";
        font-weight: 600;
        color: #333;
        padding: 20px 0;
      }
      .questionInfo {
        padding-bottom: 20px;
        font-family: "PingFang SC";
        font-weight: 400;
        font-size: 14px;
        line-height: 21px;
        text-align: left;
        color: #666;
      }
    }
    .homepageCon {
      margin-top: 20px;
      padding: 20px 0;
      background: #fff;
      box-shadow: 0 16px 32px rgba(0, 0, 0, 0.12);
      p {
        font-family: "PingFang SC Semibold";
        font-weight: 600;
        font-size: 16px;
        line-height: 14px;
        text-align: center;
        color: #333;
      }
      .verificationCode {
        display: flex;
        .code {
          padding: 0 5px;
          line-height: 48px;
          color: #666666;
          text-align: center;
          font-size: 14px;
          border-radius: 4px;
          background: #fff;
          border: 1px solid #bfbfbf;
          margin-top: 5%;
          width: 40%;
          height: 48px;
          margin-right: 18px;
        }
        .el-button {
          width: 100%;
          height: 40px;
        }
      }
      .confirm-account {
        display: flex;
        padding: 0px 20px;
        flex-direction: row;
        justify-content: space-between;
        span {
          font-weight: normal;
        }
      }
      .look-server-pwd {
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        .look-pwd {
          margin: 0px !important;
          padding: 0px !important;
        }
      }
      .el-button--primary {
        display: block;
        width: 100%;
        margin-bottom: 20px;
        text-align: center;
      }
      .inputCon {
        padding: 0 20px;
        position: relative;
        .inputbtn {
          width: 40%;
          .submit-btn {
            margin-top: 21px !important;
          }
          // padding-right: 20px;
        }
        .remark-style {
          font-weight: normal;
          font-size: 12px;
          text-align: left;
          margin-bottom: 10px;
        }
      }
      .inputLoc {
        position: relative;
        img {
          position: absolute;
          top: 48%;
          left: 10px;
          top: 30px;
        }
      }
      .confirm-account-common {
        margin-top: 16px;
      }
      .code {
      }
      .el-input {
        position: relative;
        color: #666 !important;
        margin: 0 auto;
        // padding: 0 20px;
        text-align: center;
      }
      .login-input /deep/ .el-input__inner {
        position: relative;
        padding-left: 40px;
        width: 100%;
        height: 40px;
        border-radius: 4px;
        background: #fff;
        border: 1px solid hsl(0, 0%, 75%);
      }
      /deep/ input::-webkit-input-placeholder {
        color: #666;
      }
    }
  }
  .questionConList {
    position: absolute;
    width: 100%;
    left: 50%;
    min-height: 100vh;
    transform: translateX(-50%);
    background-color: #efeff4;
    .questionNav {
      text-align: center;
      line-height: 40px;
      border-bottom: solid 1px #d9d9d9;
      .homepageTitle {
        font-size: 20px;
        font-family: "PingFang SC Semibold";
        font-weight: 600;
        color: #333;
        padding: 20px 0;
      }
      .questionInfo {
        padding-bottom: 20px;
        font-family: "PingFang SC";
        font-weight: 400;
        font-size: 14px;
        line-height: 21px;
        text-align: left;
        color: #666;
      }
    }
    .questionList {
      padding: 20px 0;
      font-size: 12px;
      border-bottom: 1px solid #d9d9d9;
      .listName {
        margin-top: 20px;
        span {
          font-size: 14px;
        }
        .el-select /deep/.el-input {
          width: 110%;
          /deep/.el-input__inner {
            width: 100%;
          }
        }
      }
      .score {
        width: 96px;
        height: 96px;
        background: #e6f7ff;
        border: 1px solid #69c0ff;
        border-radius: 50%;
        margin: 15px auto;
        text-align: center;
        span {
          font-family: "Microsoft YaHei Semibold";
          font-weight: 600;
          font-size: 36px;
          display: block;
          margin-top: 15px;
          color: #1890ff;
        }
      }

      .list-padd-style {
        padding: 0px;
      }
      .listCon {
        padding: 10px 0 50px 0;
        // padding: 10px 0 70px 0;
        // margin-top: 30px;
        // margin-bottom: 55px;
        .questionTitle {
          font-family: "PingFang SC Medium";
          font-weight: 400;
          font-size: 13px;
          line-height: 20px;
          text-align: left;
          color: #333;
        }

        .list-con-title {
          font-weight: 500;
          font-size: 15px;
        }
        span {
          position: absolute;
        }
      }
      .tipBot {
        display: flex;
        justify-content: space-between;
        font-family: "PingFang SC";
        font-weight: 400;
        font-size: 13px;
        :nth-child(1) {
          color: #666666;
        }
        :nth-child(2) {
          color: #333333;
        }
      }
    }
  }
  .el-slider /deep/.el-slider__input {
    position: absolute;
    top: 80px;
    left: 50%;
    transform: translateX(-50%);
  }
  .el-slider /deep/.el-slider__runway.show-input {
    width: 100%;
    height: 2px;
    margin: 25px auto;
    background-color: #bae7ff;
  }
  .el-slider /deep/ .el-slider__bar {
    height: 2px;
    background-color: #1890ff;
  }
  .el-slider /deep/.el-slider__button {
    width: 32px;
    height: 32px;
    border: 2px solid #1890ff;
    background-color: #1890ff;
  }
  .scoreVal {
    width: 32px;
    height: 32px;
    z-index: 9999;
    border-radius: 50%;
    text-align: center;
    line-height: 32px;
    color: #fff;
    position: absolute;
    top: 12px;
  }
  .bottomBtn {
    text-align: center;
    padding-bottom: 20px;
    .el-button {
      width: 38vw;
    }
  }
}
.tip-style {
  font-size: 12px !important;
  height: auto;
  line-height: 14px !important;
  font-weight: normal !important;
  text-align: left !important;
  padding: 0px 16px;
}
</style>
<style lang="scss">
.message-logout {
  min-width: 100px !important;
  .el-icon-warning {
    font-size: 15px;
  }
  .el-icon--error {
    font-size: 20px;
  }
}
.changeTooltip {
  font-size: 15px;
  background: transparent !important;
  span {
    display: none;
    // color: #000;
    // top: 41px;
    // left: 5px;
    // position: absolute;
  }
  .popper__arrow::after {
    content: "";
    border-width: 0px !important;
  }
  .popper__arrow {
    border-width: 0px !important;
  }
  .el-slider__marks-text {
    margin-top: 30px;
  }
}
</style>
